<template>
    <div>
        <el-container class="el-conta">

            <el-header>
                <el-button type="primary">添加轮播图</el-button>
            </el-header>

            <el-main>
                <el-table 
                :data="list" 
                max-height="420px" 
                :border="true"
                >
                <el-table-column type="index" label="序号" />
                    <el-table-column label="图片">
                        <template #default="scope">
                            <el-image
                            :src="scope.row.img"
                            :zoom-rate="1.2"
                            :z-index="100"
                            :preview-src-list="[scope.row.img]"
                            :initial-index="4"
                            fit="cover"
                            :preview-teleported="true"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column prop="alt" label="提示信息" />
                    <el-table-column prop="link" label="链接地址" />

                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-popconfirm
                            title="是否删除?" 
                            @confirm="confirmData(scope.row.bannerid)" 
                            @cancel="cancel">
                                <template #reference>
                                    <el-button type="danger" circle >
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
            <el-footer>
                <div class="listBottom">
                    <el-pagination background layout="prev, pager, next" :total="total" @current-change=""/>
                </div>
            </el-footer>
            
        </el-container>
    </div>
</template>

<script>
    import {getBanner,removeData} from '../api/banner.js'
    export default{
        data(){
            return {
                list:[],
                total:0,
            }
        },
        methods:{
            cancel(){
                alert('取消')
            },
            async confirmData(id){
                debugger
                let res = await removeData(id);
                console.log(res);
            }
        },
        async created(){
            let res = await getBanner()
            this.list = res.data
            this.total = res.data.length
        }
    }
</script>

<style scoped>
        .pai{
        border: none;
    }
    .listBottom{
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .bottomImg{
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: 0px;
        right: 0;
    }
</style>